<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)


const init = () => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      series: [
        {
          color: '#71c861',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['65%', '80%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            formatter: '{d}%',
          },
          data: [
            {value: 100},
          ]
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
}

onMounted(() => {
  init()
})

</script>

<style lang="less" scoped>
</style>
